<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页-汽车出租系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="${ctx}/resources/favicon.ico">
	<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="${ctx}/resources/css/index.css" media="all" />
</head>
<body class="main_body">
	<div class="layui-layout layui-layout-admin">
		<!-- 顶部 -->
		<div class="layui-header header">
			<div class="layui-main mag0">
				<a href="#" class="logo">汽车出租</a>
				<!-- 显示/隐藏菜单 -->
				<a href="javascript:;" class="seraph hideMenu icon-caidan"></a>
			    <!-- 顶部右侧菜单 -->
			    <ul class="layui-nav top_menu">
					
					<li class="layui-nav-item lockcms" pc>
						<a href="javascript:;"><i class="seraph icon-lock"></i><cite>锁屏</cite></a>
					</li>
					<li class="layui-nav-item" id="userInfo">
						<a href="javascript:;"><img src="${ctx}/user/downloadFaceFile.action?path=${user.carimg}" class="layui-nav-img userAvatar" width="35" height="35"><cite class="adminName">${user.realname }</cite></a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;" data-url="${ctx}/sys/toUserInfo.action"><i class="seraph icon-ziliao" data-icon="icon-ziliao"></i><cite>个人资料</cite></a></dd>
							<dd><a href="javascript:;" data-url="${ctx}/sys/toChangePwd.action"><i class="seraph icon-xiugai" data-icon="icon-xiugai"></i><cite>修改密码</cite></a></dd>
							
							<dd pc><a href="javascript:;" class="changeSkin"><i class="layui-icon">&#xe61b;</i><cite>更换皮肤</cite></a></dd>
							<dd><a href="${ctx}/login/logout.action" class="signOut" ><i class="seraph icon-tuichu"></i><cite>退出</cite></a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<!-- 左侧导航 -->
		<div class="layui-side layui-bg-black">
			<div class="user-photo">
				<a class="img" title="我的头像" ><img src="${ctx}/user/downloadFaceFile.action?path=${user.carimg}" class="userAvatar"></a>
				<p>你好！<span class="userName">${user.realname }</span>, 欢迎登录</p>
			</div>
			<!-- 搜索 -->
			<div class="layui-form component">
				<select name="search" id="search" lay-search lay-filter="searchPage">
					<option value="">搜索页面或功能</option>
					<option value="1">layer</option>
					<option value="2">form</option>
				</select>
				<i class="layui-icon">&#xe615;</i>
			</div>
			<div class="navBar layui-side-scroll" id="navBar">
				<ul class="layui-nav layui-nav-tree">
					<li class="layui-nav-item layui-this">
						<a href="javascript:;" data-url="${ctx}/desk/toDeskManager.action"><i class="layui-icon" data-icon=""></i><cite>后台首页</cite></a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 右侧内容 -->
		<div class="layui-body layui-form">
			<div class="layui-tab mag0" lay-filter="bodyTab" id="top_tabs_box">
				<ul class="layui-tab-title top_tab" id="top_tabs">
					<li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>
				</ul>
				<ul class="layui-nav closeBox">
				  <li class="layui-nav-item">
				    <a href="javascript:;"><i class="layui-icon caozuo">&#xe643;</i> 页面操作</a>
				    <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="refresh refreshThis"><i class="layui-icon">&#xe669;</i> 刷新当前</a></dd>
				      <dd><a href="javascript:;" class="closePageOther"><i class="seraph icon-prohibit"></i> 关闭其他</a></dd>
				      <dd><a href="javascript:;" class="closePageAll"><i class="seraph icon-guanbi"></i> 关闭全部</a></dd>
				    </dl>
				  </li>
				</ul>
				<div class="layui-tab-content clildFrame">
					<div class="layui-tab-item layui-show">
						<iframe src="${ctx}/desk/toDeskManager.action"></iframe>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="layui-footer footer">
			<p><span>copyright @2019 老雷</span></p>
		</div>
	</div>

	<!-- 移动导航 -->
	<div class="site-tree-mobile"><i class="layui-icon">&#xe602;</i></div>
	<div class="site-mobile-shade"></div>

	<script type="text/javascript" src="${ctx}/resources/layui/layui.js"></script>
	<script type="text/javascript">
		var cacheStr = window.sessionStorage.getItem("cache"),
	    oneLoginStr = window.sessionStorage.getItem("oneLogin");
		layui.use(['form','jquery',"layer"],function() {
		    var form = layui.form,
		        $ = layui.jquery,
		        layer = parent.layer === undefined ? layui.layer : top.layer;
		
		    //判断是否web端打开
		    if(!/http(s*):\/\//.test(location.href)){
		        layer.alert("请先将项目部署到 localhost 下再进行访问【建议通过tomcat、webstorm、hb等方式运行，不建议通过iis方式运行】，否则部分数据将无法显示");
		    }else{    //判断是否处于锁屏状态【如果关闭以后则未关闭浏览器之前不再显示】
		        if(window.sessionStorage.getItem("lockcms") != "true" && window.sessionStorage.getItem("showNotice") != "true"){
		            showNotice();
		        }
		    }
		
		    //判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像
		    if(window.sessionStorage.getItem('userFace') &&  $(".userAvatar").length > 0){
		        $("#userFace").attr("src",window.sessionStorage.getItem('userFace'));
		        $(".userAvatar").attr("src",$(".userAvatar").attr("src").split("images/")[0] + "images/" + window.sessionStorage.getItem('userFace').split("images/")[1]);
		    }else{
		        $("#userFace").attr("src","../../images/face.jpg");
		    }
		
		    //公告层
		    function showNotice(){
		    }
		    function tipsShow(){
		        window.sessionStorage.setItem("showNotice","true");
		        if($(window).width() > 432){  //如果页面宽度不足以显示顶部“系统公告”按钮，则不提示
		            layer.tips('系统公告躲在了这里', '#userInfo', {
		                tips: 3,
		                time : 1000
		            });
		        }
		    }
		    $(".showNotice").on("click",function(){
		        showNotice();
		    })
		
		    //锁屏
		    function lockPage(){
		        layer.open({
		            title : false,
		            type : 1,
		            content : '<div class="admin-header-lock" id="lock-box">'+
		                            '<div class="admin-header-lock-img"><img src="../resources/images/face.jpg" class="userAvatar"/></div>'+
		                            '<div class="admin-header-lock-name" id="lockUserName">驊驊龔頾</div>'+
		                            '<div class="input_btn">'+
		                                '<input type="password" class="admin-header-lock-input layui-input" autocomplete="off" placeholder="请输入密码解锁.." name="lockPwd" id="lockPwd" />'+
		                                '<button class="layui-btn" id="unlock">解锁</button>'+
		                            '</div>'+
		                            '<p>请输入用户密码，否则不会解锁成功哦！！！</p>'+
		                        '</div>',
		            closeBtn : 0,
		            shade : 0.9,
		            success : function(){
		                //判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像
		                if(window.sessionStorage.getItem('userFace') &&  $(".userAvatar").length > 0){
		                    $(".userAvatar").attr("src",$(".userAvatar").attr("src").split("images/")[0] + "images/" + window.sessionStorage.getItem('userFace').split("images/")[1]);
		                }
		            }
		        })
		        $(".admin-header-lock-input").focus();
		    }
		    $(".lockcms").on("click",function(){
		        window.sessionStorage.setItem("lockcms",true);
		        lockPage();
		    })
		    // 判断是否显示锁屏
		    if(window.sessionStorage.getItem("lockcms") == "true"){
		        lockPage();
		    }
		    // 解锁
		    $("body").on("click","#unlock",function(){
		        if($(this).siblings(".admin-header-lock-input").val() == ''){
		            layer.msg("请输入解锁密码！");
		            $(this).siblings(".admin-header-lock-input").focus();
		        }else{
		        	$.post("${ctx}/login/checkPwd.action",{pwd:$(this).siblings(".admin-header-lock-input").val()},function(res){
		        		if(res){
			                window.sessionStorage.setItem("lockcms",false);
			                $(this).siblings(".admin-header-lock-input").val('');
			                layer.closeAll("page");
			            }else{
			                layer.msg("密码错误，请重新输入！");
			                $(this).siblings(".admin-header-lock-input").val('').focus();
			            }
		        	})
		        }
		    });
		    $(document).on('keydown', function(event) {
		        var event = event || window.event;
		        if(event.keyCode == 13) {
		            $("#unlock").click();
		        }
		    });
		
		    //退出
		    $(".signOut").click(function(){
		        window.sessionStorage.removeItem("menu");
		        menu = [];
		        window.sessionStorage.removeItem("curmenu");
		    })
		
		    //判断是否修改过系统基本设置，去显示底部版权信息
		    if(window.sessionStorage.getItem("systemParameter")){
		        systemParameter = JSON.parse(window.sessionStorage.getItem("systemParameter"));
		        $(".footer p span").text(systemParameter.powerby);
		    }
		
		    //更换皮肤
		    function skins(){
		        var skin = window.sessionStorage.getItem("skin");
		        if(skin){  //如果更换过皮肤
		            if(window.sessionStorage.getItem("skinValue") != "自定义"){
		                $("body").addClass(window.sessionStorage.getItem("skin"));
		            }else{
		                $(".layui-layout-admin .layui-header").css("background-color",skin.split(',')[0]);
		                $(".layui-bg-black").css("background-color",skin.split(',')[1]);
		                $(".hideMenu").css("background-color",skin.split(',')[2]);
		            }
		        }
		    }
		    skins();
		    $(".changeSkin").click(function(){
		        layer.open({
		            title : "更换皮肤",
		            area : ["310px","280px"],
		            type : "1",
		            content : '<div class="skins_box">'+
		                            '<form class="layui-form">'+
		                                '<div class="layui-form-item">'+
		                                    '<input type="radio" name="skin" value="默认" title="默认" lay-filter="default" checked="">'+
		                                    '<input type="radio" name="skin" value="橙色" title="橙色" lay-filter="orange">'+
		                                    '<input type="radio" name="skin" value="蓝色" title="蓝色" lay-filter="blue">'+
		                                    '<input type="radio" name="skin" value="自定义" title="自定义" lay-filter="custom">'+
		                                    '<div class="skinCustom">'+
		                                        '<input type="text" class="layui-input topColor" name="topSkin" placeholder="顶部颜色" />'+
		                                        '<input type="text" class="layui-input leftColor" name="leftSkin" placeholder="左侧颜色" />'+
		                                        '<input type="text" class="layui-input menuColor" name="btnSkin" placeholder="顶部菜单按钮" />'+
		                                    '</div>'+
		                                '</div>'+
		                                '<div class="layui-form-item skinBtn">'+
		                                    '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="changeSkin">确定更换</a>'+
		                                    '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="noChangeSkin">朕再想想</a>'+
		                                '</div>'+
		                            '</form>'+
		                        '</div>',
		            success : function(index, layero){
		                var skin = window.sessionStorage.getItem("skin");
		                if(window.sessionStorage.getItem("skinValue")){
		                    $(".skins_box input[value="+window.sessionStorage.getItem("skinValue")+"]").attr("checked","checked");
		                };
		                if($(".skins_box input[value=自定义]").attr("checked")){
		                    $(".skinCustom").css("visibility","inherit");
		                    $(".topColor").val(skin.split(',')[0]);
		                    $(".leftColor").val(skin.split(',')[1]);
		                    $(".menuColor").val(skin.split(',')[2]);
		                };
		                form.render();
		                $(".skins_box").removeClass("layui-hide");
		                $(".skins_box .layui-form-radio").on("click",function(){
		                    var skinColor;
		                    if($(this).find("div").text() == "橙色"){
		                        skinColor = "orange";
		                    }else if($(this).find("div").text() == "蓝色"){
		                        skinColor = "blue";
		                    }else if($(this).find("div").text() == "默认"){
		                        skinColor = "";
		                    }
		                    if($(this).find("div").text() != "自定义"){
		                        $(".topColor,.leftColor,.menuColor").val('');
		                        $("body").removeAttr("class").addClass("main_body "+skinColor+"");
		                        $(".skinCustom").removeAttr("style");
		                        $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
		                    }else{
		                        $(".skinCustom").css("visibility","inherit");
		                    }
		                })
		                var skinStr,skinColor;
		                $(".topColor").blur(function(){
		                    $(".layui-layout-admin .layui-header").css("background-color",$(this).val()+" !important");
		                })
		                $(".leftColor").blur(function(){
		                    $(".layui-bg-black").css("background-color",$(this).val()+" !important");
		                })
		                $(".menuColor").blur(function(){
		                    $(".hideMenu").css("background-color",$(this).val()+" !important");
		                })
		
		                form.on("submit(changeSkin)",function(data){
		                    if(data.field.skin != "自定义"){
		                        if(data.field.skin == "橙色"){
		                            skinColor = "orange";
		                        }else if(data.field.skin == "蓝色"){
		                            skinColor = "blue";
		                        }else if(data.field.skin == "默认"){
		                            skinColor = "";
		                        }
		                        window.sessionStorage.setItem("skin",skinColor);
		                    }else{
		                        skinStr = $(".topColor").val()+','+$(".leftColor").val()+','+$(".menuColor").val();
		                        window.sessionStorage.setItem("skin",skinStr);
		                        $("body").removeAttr("class").addClass("main_body");
		                    }
		                    window.sessionStorage.setItem("skinValue",data.field.skin);
		                    layer.closeAll("page");
		                });
		                form.on("submit(noChangeSkin)",function(){
		                    $("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+"");
		                    $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
		                    skins();
		                    layer.closeAll("page");
		                });
		            },
		            cancel : function(){
		                $("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+"");
		                $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
		                skins();
		            }
		        })
		    })
		
		})
	</script>
	
	<script type="text/javascript">
	var $,tab,dataStr,layer;
	layui.config({
		base : "${ctx}/resources/js/"
	}).extend({
		"bodyTab" : "bodyTab"
	})
	layui.use(['bodyTab','form','element','layer','jquery'],function(){
		var form = layui.form,
			element = layui.element;
			$ = layui.$;
	    	layer = parent.layer === undefined ? layui.layer : top.layer;
			tab = layui.bodyTab({
				openTabNum : "50",  //最大可打开窗口数量
				url : "${ctx}/menu/loadIndexLeftMenuJson.action" //获取菜单json地址
			});

		//通过顶部菜单获取左侧二三级菜单   注：此处只做演示之用，实际开发中通过接口传参的方式获取导航数据
		function getData(json){
			$.getJSON(tab.tabConfig.url,function(data){
	                dataStr = data;
	                //重新渲染左侧菜单
	                tab.render();
			})
		}
		//页面加载时判断左侧菜单是否显示
		//通过顶部菜单获取左侧菜单
		$(".topLevelMenus li,.mobileTopLevelMenus dd").click(function(){
			if($(this).parents(".mobileTopLevelMenus").length != "0"){
				$(".topLevelMenus li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
			}else{
				$(".mobileTopLevelMenus dd").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
			}
			$(".layui-layout-admin").removeClass("showMenu");
			$("body").addClass("site-mobile");
			getData($(this).data("menu"));
			//渲染顶部窗口
			tab.tabMove();
		})

		//隐藏左侧导航
		$(".hideMenu").click(function(){
			if($(".topLevelMenus li.layui-this a").data("url")){
				layer.msg("此栏目状态下左侧菜单不可展开");  //主要为了避免左侧显示的内容与顶部菜单不匹配
				return false;
			}
			$(".layui-layout-admin").toggleClass("showMenu");
			//渲染顶部窗口
			tab.tabMove();
		})

		//通过顶部菜单获取左侧二三级菜单   注：此处只做演示之用，实际开发中通过接口传参的方式获取导航数据
		getData("contentManagement");

		//手机设备的简单适配
	    $('.site-tree-mobile').on('click', function(){
			$('body').addClass('site-mobile');
		});
	    $('.site-mobile-shade').on('click', function(){
			$('body').removeClass('site-mobile');
		});

		// 添加新窗口
		$("body").on("click",".layui-nav .layui-nav-item a:not('.mobileTopLevelMenus .layui-nav-item a')",function(){
			//如果不存在子级
			if($(this).siblings().length == 0){
				addTab($(this));
				$('body').removeClass('site-mobile');  //移动端点击菜单关闭菜单层
			}
			$(this).parent("li").siblings().removeClass("layui-nav-itemed");
		})

		//刷新后还原打开的窗口
	    if(cacheStr == "true") {
	        if (window.sessionStorage.getItem("menu") != null) {
	            menu = JSON.parse(window.sessionStorage.getItem("menu"));
	            curmenu = window.sessionStorage.getItem("curmenu");
	            var openTitle = '';
	            for (var i = 0; i < menu.length; i++) {
	                openTitle = '';
	                if (menu[i].icon) {
	                    if (menu[i].icon.split("-")[0] == 'icon') {
	                        openTitle += '<i class="seraph ' + menu[i].icon + '"></i>';
	                    } else {
	                        openTitle += '<i class="layui-icon">' + menu[i].icon + '</i>';
	                    }
	                }
	                openTitle += '<cite>' + menu[i].title + '</cite>';
	                openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + menu[i].layId + '">&#x1006;</i>';
	                element.tabAdd("bodyTab", {
	                    title: openTitle,
	                    content: "<iframe src='" + menu[i].href + "' data-id='" + menu[i].layId + "'></frame>",
	                    id: menu[i].layId
	                })
	                //定位到刷新前的窗口
	                if (curmenu != "undefined") {
	                    if (curmenu == '' || curmenu == "null") {  //定位到后台首页
	                        element.tabChange("bodyTab", '');
	                    } else if (JSON.parse(curmenu).title == menu[i].title) {  //定位到刷新前的页面
	                        element.tabChange("bodyTab", menu[i].layId);
	                    }
	                } else {
	                    element.tabChange("bodyTab", menu[menu.length - 1].layId);
	                }
	            }
	            //渲染顶部窗口
	            tab.tabMove();
	        }
	    }else{
			window.sessionStorage.removeItem("menu");
			window.sessionStorage.removeItem("curmenu");
		}
	})

	//打开新窗口
	function addTab(_this){
		tab.tabAdd(_this);
	}
	</script>
</body>
</html>